import 'package:fluent_ui/fluent_ui.dart' as fluentui;
import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    final flyoutController = fluentui.FlyoutController();

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('登录'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('登录', style: TextStyle(fontSize: 40)),
            fluentui.FlyoutTarget(
              controller: flyoutController,
              child: fluentui.Button(
                child: const Text('Show TeachingTip'),
                onPressed: () {
                  fluentui.showTeachingTip(
                    flyoutController: flyoutController,
                    nonTargetedAlignment: Alignment.bottomCenter,
                    builder: (context) {
                      return fluentui.TeachingTip(
                        title: const Text('Tip'),
                        subtitle: const Text(
                          'Operation complete successfully.',
                        ),
                        buttons: [
                          fluentui.Button(
                            onPressed: () => flyoutController.close(),
                            child: const Text('Close'),
                          ),
                        ],
                      );
                    },
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}
